<template>
	<div id="caseDetail">
		<v-header :title="'风景摄影'"></v-header>
		<div class="caseDetail-header">
			<img src="../../common/images/bg.png"/>
		</div>
		<div class="caseDetail-all">
			<div class="active">全部照片</div>
		</div>
		<div class="caseDetail-list">
			<div class="caseDetail-list-item" v-for="item in list">
				<img src="../../common/images/avatar.jpg"/>
			</div>
		</div>
	</div>
</template>

<script>
	import VHeader from 'components/v-header'
	import VMask from 'components/v-mask'
	import Loading from 'components/loading'
	import BottomBar from 'components/bottom-bar'
	
	export default {
		components: {
			BottomBar,
			Loading,
			VMask,
			VHeader
		},
		data() {
			return {
				list:[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
			}
		}
	}
</script>

<style scoped lang="stylus">
@import '../../common/stylus/variable.styl'
@import '../../common/stylus/mixin.styl'

#caseDetail
	position fixed	
	height 100%
	width 100%
	display flex
	flex-direction column
	background #fff
	.caseDetail-header
		img 
			width 100%
			height 200px
	
	.caseDetail-all
		padding 0 15px
		
		div
			padding 5px 10px
			text-align center
			width 80px
			font-size $font-size-small
		
		.active
			color $color-theme
			border-bottom 2px solid $color-theme
	
	.caseDetail-list
		display flex
		flex-wrap wrap
		overflow-y scroll
		.caseDetail-list-item
			display flex
			margin 0 1px 1px 0
			img
				height 121px
			&:nth-child(3n)
				margin 0
				
			
</style>